<template>
  <div>
    <!-- 顶部 -->
    <el-card>
      <div class="title">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input @clear="search"  clearable v-model="orderList.cluster" placeholder="请输入用户ID/昵称"></el-input>
          </el-col>
          <el-col :span="4">
	    <el-input type="date"  @clear="search"  clearable v-model="orderList.lastedittimeStart" placeholder="请输入开始时间"></el-input>
          </el-col>
    	  <el-col :span="4">
    	    <el-input type="date"  @clear="search"  clearable v-model="orderList.lastedittimeStop" placeholder="请输入结束时间"></el-input>
    	  </el-col>
	  <el-col :span="4">
	  <div style="margin-top: 1px;">
	      <el-select @clear="search" slot="prepend" clearable v-model="orderList.displayingno" placeholder="请选择">
		<el-option label="不限" value="-1"></el-option>
		<el-option label="显示" value="1"></el-option>
		<el-option label="不显示" value="0"></el-option>
	      </el-select>
	  </div>
	  </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 题目列表 -->
    <el-card>
      <div>题目列表</div>
      <el-divider></el-divider>
          <el-table @sort-change='sortid' :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :data="questions"  stripe  style="width: 100%" >
	  <el-table-column prop="id" label="题目ID" width="100"></el-table-column>
          <el-table-column prop="sceneType.name" label="场景分类" width="120"></el-table-column>
          <el-table-column  sortable="custom" prop="lastedittime" label="最近编辑时间" width="180"></el-table-column>
          <el-table-column prop="stem" label="题目" width="360"></el-table-column>
	  <el-table-column  label="正确答案" width="80">
		  <template slot-scope="scope">
			  <el-tag>{{scope.row.correctindex == 0?scope.row.choices.split(";")[0]:scope.row.choices.split(";")[1]}}</el-tag>
		  </template>
	  </el-table-column>
	  <el-table-column prop="firstee" label="错误答案" width="80">
		  <template slot-scope="scope">
		  	 <el-tag>{{scope.row.correctindex == 0?scope.row.choices.split(";")[1]:scope.row.choices.split(";")[0]}}</el-tag>
		  </template>
	  </el-table-column>
          <el-table-column  label="显示状态">
	    <template slot-scope="scope">
              <el-tag>{{scope.row.displaying ? 'on' : 'off'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作"  v-if="roleId !== 2">
            <template slot-scope="scope">
              <el-button @click="edtior(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
              <el-button @click="removeShop(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <br /><br />
        <p style="">共计{{sum}}条记录</p>
     <paging-query style="margin: -55px 0px 0px 300px;" :pages="pages"  :total="sum" @currentPage="currentPage"></paging-query>

    </el-card>
  </div>
</template>

<script>
import {getQuestions,getQuestionSum,deleteQuestion} from "../api/index"
import PagingQuery from "../components/pagination"
export default {
  components:{
    PagingQuery
  },
  data() {
    return {
      roleid:1,
      pages:{
        page:1,
        count:5,
      },
      chaawe:"5",
      // 数据
      orderList: {
        cluster: "",
        lastedittimeStart: "",
        lastedittimeStop: "",
        sortingKey: "",
        displayingno:"-1",
      	sortingDirection:false
      },
      sum:0,
      questions: [],
	// 角色id
	roleId:0
    };
  },
  created() {
     this.getGoods()
     this.getTotal()
     this.roleId =JSON.parse( window.sessionStorage.getItem("user")).role.id

  },
  methods:{
    //排序
    async sortid(colum,prop,order){
      //column：当前列;  prop：当前列需要排序的数据; order：排序的规则（升序、降序和默认[默认就是没排序]）
      //上升ascending==false;   下降descending==true;   没有null;
      console.log(colum.prop)
      if(colum.prop=="lastedittime"){
        //最近编辑时间
        this.orderList.sortingKey="questionLastedittime";
        if(colum.order=="ascending"){
          this.orderList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.orderList.sortingDirection=true
          }else{
            this.orderList.sortingKey=""
            this.orderList.sortingDirection=false
          }
      }
      this.getGoods()
    },
    // 获取总数
    async getTotal() {
      const res = await getQuestionSum({...this.orderList});
      this.sum = res.data.sum;
    },
    // 获取列表
    async getGoods() {
      const res = await getQuestions({ ...this.orderList, ...this.pages });
      if(res.code !==200)return this.$message.error("获取会员列表失败")
      //this.$message.success("获取会员列表成功")
      this.questions = res.data.questions;
    },
    // 分页
    currentPage(newPage) {
      this.pages.page=newPage
      this.getGoods()
    },
    // 搜索
    search() {
      this.getGoods();
      this.getTotal()
   },
    // 清空搜索
    clear(){
       this.getGoods()
    },
    // 编辑
    edtior(id) {
      this.$router.push({path:"/addQuestion",query:{id}})
    },
    // 删除
    async removeShop(id){
      const del=await this.$confirm("确定删除该题目吗？","删除").catch(err=>err)
      if(del !== "confirm")return this.$message.info("取消删除")
      console.log(id)
      const res=await deleteQuestion({id})
      console.log(res.code)
      if(res.code !== 200)return this.$message.error("删除失败")
      this.$message.success("删除成功")
      this.getGoods()
    }
  }
};
</script>

<style lang="less" scoped>
.el-col{
  padding-bottom: 20px;
}
.el-card {
  margin-bottom: 20px;
}
.shop_list {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #eee;
}
img{
  width: 50px;
  height: 50px;
}
</style>
